import React, {Fragment, useEffect} from 'react'
import { toJS } from 'mobx'
import { useObserver, useLocalStore } from 'mobx-react'
import store from './store'
import topStore from '../../store'

function Home (props) {
    const homeStore = useLocalStore(() => store)
    const globalStore = useLocalStore(() => topStore)
    // console.log(toJS(homeStore), '123')
    
    useEffect(()=>{
        console.log(toJS(homeStore), globalStore, 'didmount')
        return () => console.log(toJS(homeStore), 'invoked')
    },[homeStore, globalStore])
    return useObserver(() => <Fragment>
        <div onClick={homeStore.setName}>{homeStore.name}</div>
        <button onClick={()=>globalStore.setInfo(homeStore.name)}>换油</button>
    </Fragment>)
}

export default Home